<template>
  <div class="plugin" style="width: 1000px;text-align: center">
    <el-form  ref="form" label-width="120px" :model="form" :rules="rules">
<!--      <el-form-item label="缓存">
        <el-input disabled></el-input>
      </el-form-item>-->


      <el-form-item label="是否开启缓存"  prop="alarm">
          <el-select v-model="form.alarm"   placeholder="请选择">
          <el-option v-for="item in SFXX" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="缓存时间(分钟)"  v-if="form.alarm==='1'"  prop="alarmTime">
        <el-input   v-model="form.alarmTime"></el-input>
      </el-form-item>

      <el-form-item label="二开事件">
        <el-input disabled></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

  export default {

    data() {

      const validateTime = (rule, value, callback) => {


        if (value) {
          if (/^([1-9][0-9]*)$/.test(value)) {
            callback();
          } else {
            callback('缓存时间只能是大于0的整数');
          }
        } else {
          callback();
        }
      };


      const defaultForm={
        alarm: '',
        alarmTime:''

      };
      return {

        SFXX: [
          {
            label: '是',
            value: "1"
          },
          {
            label: '否',
            value: "0"
          }
        ],
        defaultForm,
        form: {
          ...defaultForm
        },

        rules: {
          alarm: [
            {
              required: true,
              message: '请选择是否开启缓存',
              trigger: 'change'
            }
          ],
          alarmTime: [
            {

              validator: validateTime,

              trigger: 'change'
            }
          ]
        },
      };
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {},
    methods :{
      validate (callback) {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          typeof callback==='function'&&callback(this.form);
        });
      },
    },

    watch: {
      value: {
        handler (val) {
          if (val&&Object.keys(val).length) {
            this.form.alarm=val.alarm;
            this.form.alarmTime=val.alarmTime;

          }
        },
        immediate: true
      }
    }
  };
</script>
<style scoped lang="scss">
  /* @import url(); 引入css类 */
</style>
